<template>
    <div class="table-root" :style="{ height: vh(data.style.height) + 'vh' }">
        <BaseTable :data="tableData" v-bind="data.config">
            <template #handleTable="scope">
                <el-button type="primary" link size="small" @click="editTable(scope.row)">编辑</el-button>
            </template>
        </BaseTable>
    </div>
</template>

<script setup lang="js">
import { ref, watch } from 'vue'
import { fetchCardBody } from '@/api/global'
import { useGlobalStore } from '@/store/global'
import { storeToRefs } from 'pinia'
import { useDesign } from "@/hooks/use-design/use-design";

const props = defineProps({
    searchForm: { // 卡片查询表单
        type: Object,
        default: () => ({})
    },
    // 针对于表格
    data: {
        default: () => ({
            cardId: "", //卡片id
            type: "", // 类型 echart/table
            url: "", // 接口地址
            style: {
                height: 200
            }, // 卡片主体样式 
            config: {
                // 是否显示序号
                showIndexColumn: true,
                // 是否显示可选
                showSelectColumn: false,
                // 是否显示分页
                showFooter: false,
                // 表格数据
                propsList: [],
                // 表格配置项
                tableAttrConfig: {
                    // 是否显示边框
                    border: false,
                    // 是否显示统计
                    showSummary: false,
                    headerCellStyle: {
                        background: 'rgba(15, 49, 64, 1)',
                        color: '#fff',
                        fontFamily: 'PingFang SC',
                        fontSize: '12px',
                        fontStyle: 'normal',
                        fontWeight: '400',
                        borderRadius: "3px",
                        borderRight: "2px solid #091520",
                        boxSizing: "border-box"
                    },
                    cellStyle: {
                        fontSize: "12px",
                        color: "#BCCBCC",
                        backgroundColor: 'transparent',
                    }
                }
            }, // 卡片配置
        })
    }
})

const globalStore = useGlobalStore()

const { globalSearchForm } = storeToRefs(globalStore)

// 表格数据
const tableData = ref([])

// 表格配置项
const configRpe = ref(props.data.config)

// 初始化数据
const initData = async (form) => {
    tableData.value = [
        { key1: "排名1", key2: "测试名称1", key3: "测试饱和时长1", key4: 200 },
        { key1: "排名2", key2: "测试名称2", key3: "测试饱和时长2", key4: 300 },
        { key1: "排名3", key2: "测试名称3", key3: "测试饱和时长3", key4: 400 },
        { key1: "排名4", key2: "测试名称4", key3: "测试饱和时长4", key4: 80 },
    ]
    // 发送请求
    const res = await fetchCardBody(props.data.url, form)
}

// 监听查询表格参数
watch(
    [() => props.searchForm, globalSearchForm],
    ([newSearchForm, newGlobalSearchForm]) => {
        if (Object.keys(newGlobalSearchForm).length != 0) {
            // 合并两个表单对象
            const mergedForm = {
                ...newGlobalSearchForm,
                ...newSearchForm
            }
            initData(mergedForm)
        }
    },
    { immediate: true, deep: true }
)

// 编辑
const editTable = (row) => {
    console.log('row--->', row);
}

const { vw, vh } = useDesign()
</script>
<style scoped lang="scss">
.table-root {
    margin-top: vh(20);
    overflow-y: auto;
    // background-color: azure;
}
</style>